<template>
  <div class="conOfOrder">
    <vue-header title="确认订单" :left-options="{backText: ''}">
    </vue-header>
    <div class="vueContent-3">
      <div class="conOfOrder-centent">
        <div class="conOfOrder-content-address">
          <div class="conOfOrder-content-address-flex">
            <span class="conOfOrder-content-address-title">未设置收货地址,请点击设置</span>
          </div>
        </div>
        <div class="conOfOrder-content-order-flex">
          <div class="conOfOrder-content-order-flex-left">
            <img :src="items.shops[0].goodses[0].imageUrl">
          </div>
          <div class="conOfOrder-content-order-flex-right">
            <div class="conOfOrder-content-order-flex-right-name">
              {{items.shops[0].goodses[0].goodsName}}
            </div>
            <div class="conOfOrder-content-order-flex-right-flex">
              <div class="conOfOrder-content-order-flex-right-flex-left">
                {{items.shops[0].goodses[0].price|currency}}
              </div>
              <div class="conOfOrder-content-order-flex-right-flex-right">
                数量：{{items.shops[0].goodses[0].num}}
              </div>
            </div>
          </div>
        </div>
        <div class="conOfOrder-content-category">
          <div class="conOfOrder-content-category-number">
            <div class="conOfOrder-content-category-number-left conOfOrder-content-category-text">
              数量
            </div>
            <div class="conOfOrder-content-category-number-right">
              <x-number :min="1" v-model="items.num"></x-number>
            </div>
          </div>
          <div class="conOfOrder-content-category-number" v-for="ca in items.cate">
            <div class="conOfOrder-content-category-number-left conOfOrder-content-category-text">
              {{ca.split(":")[0]}}
            </div>
            <div class="conOfOrder-content-category-number-right ">
              {{ca.split(":")[1]}}
            </div>
          </div>
          <!-- <div class="conOfOrder-content-category-number">
            <div class="conOfOrder-content-category-number-left conOfOrder-content-category-text">
              口味
            </div>
            <div class="conOfOrder-content-category-number-right ">
              甜的
            </div>
          </div> -->
          <div class="conOfOrder-content-category-number">
            <div class="conOfOrder-content-category-number-left conOfOrder-content-category-text">
              快递费
            </div>
            <div class="conOfOrder-content-category-number-right ">
              {{items.mailPrice |currency }}
            </div>
          </div>
          <div class="conOfOrder-content-category-number-total">
            <span class="conOfOrder-content-category-number-total-order">共{{items.shops[0].goodses[0].num}}件商品 </span>
            <span class="conOfOrder-content-category-number-total-order-l">小计:</span>
            <span class="conOfOrder-content-category-number-total-order-price">{{items.totalPrice|currency}}</span>
          </div>
        </div>
      </div>

    </div>
    <div class="conOfOrder-footer">
      <div class="conOfOrder-footer-left">
        <span class="conOfOrder-footer-left-content">
          <span class="conOfOrder-footer-left-content-tag">合计:</span>
          <span class="conOfOrder-footer-left-content-price">{{items.totalPrice|currency}}</span>
        </span>
      </div>
      <div class="conOfOrder-footer-right" @click="sub()">提交订单</div>
    </div>
  </div>
</template>
<script>
import { ViewBox, XNumber } from "vux";
import vueHeader from "@/components/vue-header/index";
import store from "@/store";
import { token_expires } from "@/utils/Keyword";
import { mapGetters } from "vuex";
import { commitOrder, placeOrder } from "@/api/commitOrder";
export default {
  components: {
    ViewBox,
    vueHeader,
    XNumber
  },
  data() {
    return {
      value: 0
    };
  },
  mounted() {},
  watch: {
    "items.num": function(newVal, oldVal) {
      if (newVal != oldVal) {
        this.getItems(newVal);
      }
    }
  },
  computed: {
    ...mapGetters({
      items: "commitOrder"
    }),
    items() {
      return this.$store.getters.commitOrder;
    }
  },
  methods: {
    goPage() {
      this.$router.push({ path: "/complete" });
    },
    sub() {
      let params = {
        orderSrc: src,
        addressId: addressid,
        mailType: 0,//99自提  0
        orderType: 0,
        payType: "weixin_gzh",
        // shops: shops,
        // shopId: shopId,
        // goodses: goodses,
        // ext: ext,
        // orderTys: orderTys,
        // selUserTicketIds: ticketIds
      };
      placeOrder(params).then(res => {});
    },
    getItems(newVal) {
      let params = {
        goodsId: this.$route.query.id,
        goodses: [
          {
            goodsId: this.$route.query.id,
            skuId: this.$route.query.skuId,
            num: newVal
          }
        ]
      };
      store.dispatch("ORDERCOMMIT", params).then(res => {
        console.log(res);
        if (res == token_expires) {
          this.getItems();
        } else {
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.conOfOrder {
  background-color: #f0f0f0;
  height: 100%;
  .conOfOrder-centent {
    .conOfOrder-content-address {
      height: 2.2533rem;
      background-color: white;
      .conOfOrder-content-address-flex {
        height: 100%;
        line-height: 2.4533rem;
        text-align: center;
        color: rgba(243, 9, 1, 1);
        font-size: 0.4267rem;
        position: relative;
      }
    }
    .conOfOrder-content-address:before {
      content: "";
      background-image: url(./../../assets/images/bick.png);
      background-size: 100%;
      width: 100%;
      height: 0.1333rem;
      position: absolute;
    }
    .conOfOrder-content-address-title {
      position: relative;
    }
    .conOfOrder-content-address-title:before {
      content: "";
      background-image: url(./../../assets/images/address.png);
      background-size: 0.5333rem;
      height: 0.5333rem;
      width: 0.5333rem;
      top: 0.0267rem;
      left: -0.8rem;
      position: absolute;
    }
    .conOfOrder-content-address-flex:after {
      content: "";
      background-image: url(./../../assets/images/gopage.png);
      background-size: 0.5333rem;
      height: 0.5333rem;
      width: 0.5333rem;
      top: 0.9rem;
      right: 10px;
      position: absolute;
    }
    .conOfOrder-content-order-flex {
      background-color: white;
      display: flex;
      margin-top: 0.32rem;
      padding: 0.4rem 0 0.4rem 0.32rem;
      .conOfOrder-content-order-flex-left {
        img {
          height: 2.8rem;
          width: 2.8rem;
        }
      }
      .conOfOrder-content-order-flex-right {
        width: 100%;
        .conOfOrder-content-order-flex-right-name {
          padding: 0 0.5733rem 0 0.2667rem;
          font-size: 0.3467rem;
          color: rgba(51, 51, 51, 1);
        }
      }
      .conOfOrder-content-order-flex-right-flex {
        display: flex;
        padding: 0 0.2667rem 0 0.2667rem;
        margin-top: 1.3333rem;
        .conOfOrder-content-order-flex-right-flex-left {
          flex: 1;
          color: rgba(243, 9, 1, 1);
          font-size: 0.4267rem;
        }
        .conOfOrder-content-order-flex-right-flex-right {
          color: rgba(102, 102, 102, 1);
          font-size: 0.3467rem;
        }
      }
    }
    .conOfOrder-content-category-text {
      font-size: 0.4rem;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
    }
    .conOfOrder-content-category {
      padding: 0 0.2133rem;
      background-color: white;
      margin-top: 0.2133rem;
    }
    .weui-cell {
      padding: 10px 0 !important;
    }
    .conOfOrder-content-category-number-total {
      display: flex;
      height: 1.3867rem;
      align-items: center;
      justify-content: flex-end;
      .conOfOrder-content-category-number-total-order {
        font-size: 0.4rem;
        color: rgba(51, 51, 51, 1);
      }
      .conOfOrder-content-category-number-total-order-l {
        font-size: 0.4rem;
        color: rgba(51, 51, 51, 1);
        margin-left: 0.2667rem;
      }
      .conOfOrder-content-category-number-total-order-price {
        font-size: 0.4rem;
        color: #f30901;
      }
    }
    .conOfOrder-content-category-number {
      display: flex;
      height: 1.3867rem;

      border-bottom: 1px solid #e4e3e3;
      .conOfOrder-content-category-number-left {
        flex: 1;
        display: flex;
        align-items: center;
      }
      .conOfOrder-content-category-number-right {
        display: flex;
        align-items: center;
        font-size: 0.4rem;
        color: rgba(102, 102, 102, 1);
      }
    }
  }
  .conOfOrder-footer {
    display: flex;
    height: 1.3333rem;
    background-color: white;
    .conOfOrder-footer-left {
      flex: 1;
      color: rgba(51, 51, 51, 1);
      font-size: 0.4267rem;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .conOfOrder-footer-left-content {
        margin-right: 0.4rem;
        .conOfOrder-footer-left-content-tag {
          color: rgba(51, 51, 51, 1);
          font-size: 0.4267rem;
        }
        .conOfOrder-footer-left-content-price {
          color: #f30901;
          font-size: 0.4267rem;
        }
      }
    }
    .conOfOrder-footer-right {
      width: 2.6533rem;
      height: 100%;
      font-size: 0.4267rem;
      display: flex;
      justify-content: center;
      align-items: center;
      background: linear-gradient(
        90deg,
        rgba(242, 3, 0, 1),
        rgba(254, 78, 19, 1)
      );
      color: rgba(255, 255, 255, 1);
    }
  }
}
</style>
